<template>
	<view class="min-width">
		<f-navbar title="资源社群" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<!-- 筛选 -->
		<view class="screenFlex" style="padding: 30rpx 0;border-bottom: 1rpx solid silver;margin: 30rpx 0;">
			<view class="selectedText">
				全部
			</view>
			<view class="screenFlex" style="width: 450rpx;">
				<view class="screenTagBox">
					推荐
				</view>
				<view class="screenTagBox">
					个人名片
				</view>
				<view class="screenTagBox">
					百人群
				</view>
				<view class="screenTagBox">
					企业群
				</view>
			</view>
		</view>
	   
	   
	   <view class="box" v-for="(item,index) in dataList">
	   	<view class="flexFS">
	   		<view class=""  style="margin-right: 20rpx;">
	   			<image style="width: 100rpx;height: 100rpx;" src="../../../static/wx.jpg" mode=""></image>
	   		</view>
	   		<view class="">
	   		   <view class="flexFS">
	   		   	<view class="" style="margin-right: 20rpx;font-weight: bold;">
	   		   		创业项目群
	   		   	</view>
	   		   	<view class="flexFS">
	   		   	
	   		   			<image src="../../../static/yh.png" mode="widthFix" style="width: 37rpx;"></image>
	   		   
	   		   		<view class="">
	   		   			100人
	   		   		</view>
	   		   	</view>
	   		   </view>
	   	<view class="" style="color: #9b9b9b;font-size: 24rpx;">
	   		暂无简介
	   	</view>
	   		</view>
	   	
	   	</view>
	   	
	   	   <view class="" style="text-align: center;">
	   	   	  <image src="../../../static/gkrwm.png" mode="widthFix" style="width: 250rpx;"></image>
	   	   </view>
	   	   
	   	   
	   	   <view class="flex" style="width: 400rpx;margin: 30rpx auto;">
	   	   	  <view class="screenTagBox" style="margin-right: 30rpx;">
	   	   	  	  查看二维码
	   	   	  </view>
	   		  
	   		  <view class="screenTagBox" style="padding: 10rpx 50rpx;">
	   		  	  分享
	   		  </view>
	   	   </view>
		   <view class="" style="text-align: center;font-size: 20rpx;color: #9b9b9b;">
		   	无法添加、过期、用途不良、请联系客服
		   </view>
	   </view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dataList:[
					
					{},{},{}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexFS{
		display: flex;
		justify-content: flex-start;
	}

	
	.btn{
		
	}
	.btnBox {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.screenFlex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.screenTagBox {
		padding: 10rpx;
		color: #ffaa00;
		font-size: 20rpx;
		border-radius: 5rpx;
		background-color: rgba(255, 170, 0, 0.2);
	}
	
	.selectedText {
		font-weight: bold;
		font-size: 26rpx;
	}
	
	.close {
		width: 150rpx;
		height: 40rpx;
		color: #757575;
		font-size: 20rpx;
		line-height: 40rpx;
		border-radius: 50rpx;
		border: 1rpx solid #757575;
		text-align: center;
		padding: 20rpx;
	}
	
	.confirm {
		width: 200rpx;
		height: 80rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #f69000;
		text-align: center;
	}
	
	
	
	.tagBox {
		margin: 30rpx 20rpx;
	
	}
	
	.isSelected {
		color: #f69000;
	}
	
	.flex{
		display:flex;
		justify-content: space-between;
		 align-items: center;
	}
	
	
	

	
	.waterfall {
	
	
	
		// column-gap: 10px;
		column-count: 2;
		// -moz-column-gap: 1em;
		// -webkit-column-gap: 1em;
		column-gap: 30rpx;
	
	
	}
	
	.tRewardBox section {
		padding-bottom: 20rpx;
	}
	
	.tRewardBox section h1 {
		margin: 10px 0;
		font-size: 25rpx;
		font-weight: 700;
		/*text-align: center;*/
		line-height: 30rpx;
	}
	

	

	
	.tRewardBox .donate-item {
		text-align: right;
		color: #44b549;
	}
	
	.tRewardBox .donate-item:last-child {
		text-align: left;
		color: #00a0e9;
	}
	
	.tRewardBox .donate-item img {
		width: 100%;
		display: block;
		height: auto;
	}
	
	.tRewardBox .donate-item view {
		display: inline-block;
		width: 150rpx;
		padding: 0 6rpx;
		text-align: center;
		box-sizing: border-box;
	}
	
	.tRewardBox .donate-item view span {
		display: inline-block;
		width: 100%;
		margin: 10rpx 0;
		text-align: center;
	}
	
	.tRewardBox .el-table__body-wrapper {
		overflow: hidden;
	}
	
	.messageBox {
		margin-bottom: 30rpx;
		// overflow: auto;
		break-inside: avoid;
		/* 防止元素被分割 */
	
		// border-radius:10rpx;
	}
	
	.tcolors-bg {
			box-shadow: #918e8e 0 0 15rpx;
	}
	
	.headBoxImg {
		width: 60rpx;
		height: 60rpx;
		background-color: #44b549;
		border-radius: 80rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		margin-right: 10rpx;
	}
	
	.messageBox .titleName {
		font-size: 22rpx;
	}
	
	.messageBox .dateText {
		font-size: 26rpx;
		color: #7c7c7c;
	}
	
	.flex_start {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.headBoxImg_text {
		color: #272626;
		margin-top: 20rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		// line-height: 23rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 15;
		-webkit-box-orient: vertical;
		text-indent: 2em;
		margin-bottom: 20rpx;
	}
	
	.headBoxImg_img {
		border-radius: 3rpx;
		overflow: hidden;
	}
	
	.messageImg {
		position: relative;
		top: 10rpx;
	
	}
	
	.box{
		box-shadow: #a9a9a9 0 0 5rpx;
		padding: 20rpx;
		margin: 30rpx 0;
		border-radius: 5rpx;
	}
</style>